<template>
    <div>
        <button @click="mark">mark</button>
        <button @click="unmarkAll">unmarkAll</button>
        <button @click="removeControl">removeControl</button>
        <button @click="setFitView">setFitView</button>
        <div ref="map" style="height: 600px"></div>
        {{ message }}
        <br/>
        当前位置：
        {{ currentLocation }}
    </div>
</template>

<script>
    import FAMap from "./browser/FAMap";

    export default {
        name: "App",
        data() {
            return {
                message: '',
                map: null,
                currentLocation: ""
            };
        },
        methods: {
            mark() {
                this.map.mark(116.39, 39.9, '北京');
            },
            unmarkAll() {
                this.map.unmarkAll();
            },
            removeControl() {
                this.map.removeBasicControl('zoom');
                this.map.removeGeolocation();
            },
            setFitView() {
                this.map.setFitView();
            }
        },
        mounted() {
            FAMap.createMap(this.$refs['map']).then(map => {
                this.map = map;
                return FAMap.ui.loadBasicControl();
            }).then(() => {
                this.map.addBasicControl('zoom');
                FAMap.plugin.loadGeolocation().then(() => {
                    this.map.addGeolocation()
                        .then(result => {
                            this.currentLocation = result.formattedAddress + "\t(" + result.position.lng + ", " + result.position.lat + ")";
                        }).catch(error => {
                        console.log(error);
                    });
                });

            });
        },
        created() {
            this.message = 'script loading...\n';
            FAMap.asyncLoad("1accfe63ebc155603fd447be7681e05d").then(() => {
                this.message += "script loaded!\n"
            });
            this.message += "script of ui loading...\n";
            FAMap.asyncLoadUI().then(() => {
                this.message += "script of ui loaded!";
            });
        }
    }
</script>

<style scoped>

</style>